<template>
    <n-page-header subtitle="栅格布局+对话框">
        <template #title>
            组件练习
        </template>
        <n-grid :x-gap="12" :y-gap="8" :cols="4">
            <n-grid-item>
                <div class="light-green">
                    <n-space>
                        <n-button style="margin: 10px 0 0 10px;" type="warning" @click="handleConfirm">警告</n-button>
                        <n-button style="margin: 10px 0 0 10px;" type="success" @click="showModal = true">模态框</n-button>
                        <n-modal v-model:show="showModal">
                            <n-card style="width: 600px" title="模态框" :bordered="false" size="huge" role="dialog"
                                aria-modal="true">
                                <n-form ref="formRef" :model="model" :rules="rules">
                                    <n-form-item path="age" label="年龄">
                                        <n-input v-model:value="model.age" @keydown.enter.prevent />
                                    </n-form-item>
                                    <n-form-item path="password" label="密码">
                                        <n-input v-model:value="model.password" type="password" @input="handlePasswordInput"
                                            @keydown.enter.prevent />
                                    </n-form-item>
                                    <n-form-item ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
                                        <n-input v-model:value="model.reenteredPassword" :disabled="!model.password"
                                            type="password" @keydown.enter.prevent />
                                    </n-form-item>
                                    <n-form-item ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
                                        <n-input v-model:value="model.reenteredPassword" :disabled="!model.password"
                                            type="password" @keydown.enter.prevent />
                                    </n-form-item>
                                    <n-form-item ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
                                        <n-input v-model:value="model.reenteredPassword" :disabled="!model.password"
                                            type="password" @keydown.enter.prevent />
                                    </n-form-item>
                                    <n-form-item ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
                                        <n-input v-model:value="model.reenteredPassword" :disabled="!model.password"
                                            type="password" @keydown.enter.prevent />
                                    </n-form-item>
                                    <n-form-item ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
                                        <n-input v-model:value="model.reenteredPassword" :disabled="!model.password"
                                            type="password" @keydown.enter.prevent />
                                    </n-form-item>
                                    <n-row :gutter="[0, 24]">
                                        <n-col :span="24">
                                            <div style="display: flex; justify-content: flex-end">
                                                <n-button :disabled="model.age === null" round type="primary"
                                                    @click="handleValidateButtonClick">
                                                    验证
                                                </n-button>
                                            </div>
                                        </n-col>
                                    </n-row>
                                </n-form>
                            </n-card>
                        </n-modal>
                    </n-space>
                </div>
            </n-grid-item>
            <n-grid-item>
                <div class="green" />
            </n-grid-item>
            <n-grid-item>
                <div class="light-green" />
            </n-grid-item>
            <n-grid-item>
                <div class="green" />
            </n-grid-item>
            <n-grid-item>
                <div class="light-green" />
            </n-grid-item>
            <n-grid-item>
                <div class="green" />
            </n-grid-item>
            <n-grid-item>
                <div class="light-green" />
            </n-grid-item>
            <n-grid-item>
                <div class="green" />
            </n-grid-item>
        </n-grid>
    </n-page-header>
</template>

<script setup>

import { ref } from 'vue'
import { 
    useDialog, 
    useMessage, 
} from 'naive-ui'

// 表单功能开始
const formRef = ref(null);
const rPasswordFormItemRef = ref(null);
const modelRef = ref({
    age: null,
    password: null,
    reenteredPassword: null
})

const model = modelRef

function validatePasswordStartWith(rule, value) {
    return !!modelRef.value.password && modelRef.value.password.startsWith(value) && modelRef.value.password.length >= value.length;
}
function validatePasswordSame(rule, value) {
    return value === modelRef.value.password;
}
const rules = {
    age: [
        {
            required: true,
            validator(rule, value) {
                if (!value) {
                    return new Error("需要年龄");
                } else if (!/^\d*$/.test(value)) {
                    return new Error("年龄应该为整数");
                } else if (Number(value) < 18) {
                    return new Error("年龄应该超过十八岁");
                }
                return true;
            },
            trigger: ["input", "blur"]
        }
    ],
    password: [
        {
            required: true,
            message: "请输入密码"
        }
    ],
    reenteredPassword: [
        {
            required: true,
            message: "请再次输入密码",
            trigger: ["input", "blur"]
        },
        {
            validator: validatePasswordStartWith,
            message: "两次密码输入不一致",
            trigger: "input"
        },
        {
            validator: validatePasswordSame,
            message: "两次密码输入不一致",
            trigger: ["blur", "password-input"]
        }
    ]
};

function handlePasswordInput() {
    if (modelRef.value.reenteredPassword) {
        rPasswordFormItemRef.value?.validate({ trigger: "password-input" });
    }
}

function handleValidateButtonClick(e) {
    e.preventDefault();
    formRef.value?.validate((errors) => {
        if (!errors) {
            message.success("验证成功");
        } else {
            console.log(errors);
            message.error("验证失败");
        }
    });
}
// 表单功能结束


// 模态框
const showModal = ref(false)
// 对话框
const dialog = useDialog()
// 消息框
const message = useMessage()

// 按钮点击事件
function handleConfirm() {
    dialog.warning({
        title: "警告",
        content: "你确定？",
        positiveText: "确定",
        negativeText: "不确定",
        onPositiveClick: () => {
            message.success("确定");
        },
        onNegativeClick: () => {
            message.error("不确定");
        }
    });
}
</script>

<style lang="less" scoped>
.light-green {
    height: 108px;
    background-color: rgba(0, 128, 0, 0.12);
}

.green {
    height: 108px;
    background-color: rgba(0, 128, 0, 0.24);
}
</style>